<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计数器</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="vue.js"></script>
</head>
<!-- 创建Vue实例时：el（挂载点），data（数据），methods（方法） -->
<!-- v-on指令作用是绑定事件，简写@ -->
<!-- 方法中通过this关键字，获取data中的数据 -->
<!-- v-text指令作用是：设置元素的文本值，简写{{}} -->
<!-- v-html指令作用是：设置元素的innerHTML（本次没用到） -->

<body>
    <div id="app">
        <div class="input-num">
            <button @click="sub">-</button>
            <span>{{ num }}</span>
            <button @click="add">+</button>
        </div>
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                num: 0,
            },
            methods: {
                add: function () {
                    this.num++;
                },
                sub: function () {
                    if (this.num > 0) {
                        this.num--;
                    } else {
                        alert("已是0")
                    }

                },
            },
        });
    </script>
</body>

</html>